"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
var vue_1 = require("vue");
exports.default = (await Promise.resolve().then(function () { return require('vue'); })).defineComponent({
    props: {
        todo: {
            type: Object,
            required: true
        }
    },
    emits: ['toggle-complete', 'delete-todo', 'edit-todo'],
    setup: function (props, _a) {
        var emit = _a.emit;
        var isEditing = (0, vue_1.ref)(false);
        var editedText = (0, vue_1.ref)(props.todo.text);
        var startEdit = function () {
            isEditing.value = true;
            editedText.value = props.todo.text;
        };
        var saveEdit = function () {
            if (editedText.value.trim() === '')
                return;
            emit('edit-todo', props.todo.id, editedText.value.trim());
            isEditing.value = false;
        };
        var cancelEdit = function () {
            isEditing.value = false;
        };
        return {
            isEditing: isEditing,
            editedText: editedText,
            startEdit: startEdit,
            saveEdit: saveEdit,
            cancelEdit: cancelEdit
        };
    },
    directives: {
        focus: {
            mounted: function (el) {
                el.focus();
            }
        }
    }
});
var __VLS_ctx = {};
var __VLS_components;
var __VLS_directivesOption = {
    focus: {
        mounted: function (el) {
            el.focus();
        }
    }
};
var __VLS_directives;
// CSS variable injection 
// CSS variable injection end 
__VLS_asFunctionalElement(__VLS_intrinsicElements.li, __VLS_intrinsicElements.li)(__assign({ class: "todo-item" }, { class: ({ completed: __VLS_ctx.todo.completed }) }));
__VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(__assign({ class: "todo-content" }));
__VLS_asFunctionalElement(__VLS_intrinsicElements.input)(__assign(__assign({ onChange: function () {
        var _a = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            _a[_i] = arguments[_i];
        }
        var $event = _a[0];
        __VLS_ctx.$emit('toggle-complete', __VLS_ctx.todo.id);
    } }, { type: "checkbox", checked: (__VLS_ctx.todo.completed) }), { class: "todo-checkbox" }));
if (__VLS_ctx.isEditing) {
    __VLS_asFunctionalElement(__VLS_intrinsicElements.input)(__assign(__assign(__assign({ onKeyup: (__VLS_ctx.saveEdit) }, { onBlur: (__VLS_ctx.saveEdit) }), { onKeyup: (__VLS_ctx.cancelEdit) }), { class: "todo-edit-input" }));
    (__VLS_ctx.editedText);
    __VLS_asFunctionalDirective(__VLS_directives.vFocus)(null, __assign({}, __VLS_directiveBindingRestFields), null, null);
}
else {
    __VLS_asFunctionalElement(__VLS_intrinsicElements.span, __VLS_intrinsicElements.span)(__assign({ onDblclick: (__VLS_ctx.startEdit) }, { class: "todo-text" }));
    (__VLS_ctx.todo.text);
}
__VLS_asFunctionalElement(__VLS_intrinsicElements.div, __VLS_intrinsicElements.div)(__assign({ class: "todo-actions" }));
if (!__VLS_ctx.isEditing) {
    __VLS_asFunctionalElement(__VLS_intrinsicElements.button, __VLS_intrinsicElements.button)(__assign({ onClick: (__VLS_ctx.startEdit) }, { class: "edit-button" }));
}
__VLS_asFunctionalElement(__VLS_intrinsicElements.button, __VLS_intrinsicElements.button)(__assign({ onClick: function () {
        var _a = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            _a[_i] = arguments[_i];
        }
        var $event = _a[0];
        __VLS_ctx.$emit('delete-todo', __VLS_ctx.todo.id);
    } }, { class: "delete-button" }));
/** @type {__VLS_StyleScopedClasses['todo-item']} */ ;
/** @type {__VLS_StyleScopedClasses['completed']} */ ;
/** @type {__VLS_StyleScopedClasses['todo-content']} */ ;
/** @type {__VLS_StyleScopedClasses['todo-checkbox']} */ ;
/** @type {__VLS_StyleScopedClasses['todo-edit-input']} */ ;
/** @type {__VLS_StyleScopedClasses['todo-text']} */ ;
/** @type {__VLS_StyleScopedClasses['todo-actions']} */ ;
/** @type {__VLS_StyleScopedClasses['edit-button']} */ ;
/** @type {__VLS_StyleScopedClasses['delete-button']} */ ;
var __VLS_dollars;
var __VLS_self;
